<template>
  <div class="top-bar">
    <div class="wrap">
      <div class="l">欢迎来到叩丁狼积分商城</div>
      <div class="r">
        <ul>
          <li>
            <img
              @click="clickAvatar"
              class="avatar"
              width="26"
              :src="userInfo.headImg"
              alt=""
            />
            用户名：{{ userInfo.nickName }}
          </li>
          <li>我的积分：{{ userInfo.coin }}</li>
          <li>获取积分</li>
          <li>叩丁狼官网</li>
          <li class="cart-btn btn" v-show="isLogined">
            <img src="../assets/img/cart.png" alt="" />
            <span>购物车</span>
            <b>{{ cartTotal }}</b>
          </li>
          <li
            class="login-btn btn"
            v-show="!isLogined"
            @click="chanIsShowLoginMadal(true)"
          >
            登录
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from "vuex";
import { WeixinLoginApi, UserProfilesApi } from "../request/api";
export default {
  data() {
    return {
      // 购物车数量
      // cartTotal: 0,
    };
  },
  computed: {
    ...mapState({
      isLogined: (state) => state.loginStatus.isLogined,
      cartTotal: (state) => state.userInfo.cartTotal,
      userInfo: (state) => state.userInfo.userInfo,
    }),
  },
  created() {
    this.setUserLoginState();
  },

  methods: {
    setUserLoginState() {
      // console.log("code为:", this.$route.query.code);
      let mycode = null;
      setTimeout(() => {
        if (mycode) {
          mycode = this.$route.query.code;
          WeixinLoginApi({
            code: this.$route.query.code,
          }).then((res) => {
            console.log(res);
            if (res.code == 0) {
              // 登录成功之后的逻辑
              // 1.提示登录成功
              this.asyncChanIsisShowToast({
                msg: "登录成功",
                // type表示图标,"success"表示成功,info表示警告,danger表示失败
                type: "success",
              });
              // 2.保存token
              localStorage.setItem("x-auth-token", res["x-auth-token"]);
              // 3.登陆状态的设置
              this.chanIsisLogined(true);
              // 4.清除掉code
              this.$router.push(this.$route.path);
              // 5.更新页面上的用户信息
              this.asyncUpdaeUserInfo();
            } else {
              this.asyncChanIsisShowToast({
                msg: res.message,
                // type表示图标,"success"表示成功,info表示警告,danger表示失败
                type: "danger",
              });
            }
          });
        } else {
          // 没有code，说明没有扫码，或者用户已经登录了，不用扫码了
          // 判断有没有token，设置登录状态，(因为TopBar上面的信息，是需要靠有没有登录去展示的)
          let token = localStorage.getItem("x-auth-token");
          // 设置登录状态，为什么设置登录状态? (因为TopBar上面的信息，是需要靠有没有登录去展示的)
          this.chanIsisLogined(Boolean(token));
          if (token) {
            // 加载这个TopBar组件的时候，就需要获取用户信息
            // 所以发起请求，请求用户信息
             this.asyncUpdaeUserInfo();
          }else{
            this.initUserInfo()
          }
        
        }
      }, 100);
    },
    ...mapMutations({
      chanIsShowLoginMadal: "isShowLogin/chanIsShowLoginMadal",
      chanIsisShowToast: "toastStatus/chanIsisShowToast",
      chanIsisLogined: "loginStatus/chanIsisLogined",
      initUserInfo:"userInfo/initUserInfo"
    }),
    ...mapActions({
      asyncChanIsisShowToast: "toastStatus/asyncChanIsisShowToast",
      asyncUpdaeUserInfo: "userInfo/asyncUpdaeUserInfo",
    }),
    clickAvatar() {
      // 展示提示框,就是在调用这个Toast组件
      // 实际上，在调用这个组件的说话，提示文本，还有文本前面的符号是我们自己决定的
      this.asyncChanIsisShowToast({
        isShow: true,
        msg: "成功啦",
        // type表示图标,"success"表示成功,info表示警告,danger表示失败
        type: "success",
      });

      // setTimeout(() => {
      //   // 隐藏提示框
      //   this.chanIsisShowToast({
      //   isShow: false,
      //   msg: "成功啦",
      //   // type表示图标,"success"表示成功,info表示警告,danger表示失败
      //   type: "success",
      // });
      // }, 1500);
    },
  },
};
</script>
 
<style lang = "less" scoped>
@import url("../assets/css/public.less");
.top-bar {
  height: 40px;
  background: #242b39;
  .wrap {
    height: 40px;
    /* background: pink; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    color: #fffefe;
    .r ul {
      display: flex;
      align-items: center;
      li {
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-left: 20px;
        .avatar {
          border-radius: 50%;
          margin-right: 5px;
        }
        &.btn {
          /* 选择到有.btn类的li标签 */
          width: 124px;
          height: 40px;
          background: @base-color;
          display: flex;
          justify-content: center;
        }
        &.cart-btn {
          align-items: center;
          span {
            margin: 0 5px;
          }
          b {
            width: 22px;
            height: 22px;
            line-height: 22px;
            background-color: #fd604d;
            border-radius: 50%;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>